<template>
  <div>
    <nav-bar class="nav-bar">
      <div slot="left" class="el-icon-back" @click="goback"></div>
      <div slot="center" class="center">张弛登录注册</div>
    </nav-bar>

    <div class="el-icon-shopping-bag-1"></div>

    <div class="tabbar">
      <router-link
        to="text"
        class="text"
        title="text"
        @click.native="itemClick"
        :class="{ activeColor: this.isActive }"
        replace
      >
        短信登录
      </router-link>
      <router-link
        to="password"
        class="password"
        @click.native="itemClick"
        :class="{ activeColor: !this.isActive }"
        replace
        >密码登录</router-link
      >
    </div>
    <router-view class="input-area"></router-view>

    <el-button type="primary" class="login-button" @click="login()"
      >登录</el-button
    >
    <p class="tip">
      温馨提示:未注册的手机号验证后将自动创建张弛账号,
      登录即代表您已同意本平台隐私政策
    </p>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      path: "/login/text",
      isActive: true,
    };
  },
  created() {
    this.$router.push(this.path);
  },
  activated() {
    this.$router.push(this.path);
  },
  beforeRouteLeave(to, from, next) {
    this.path = this.$route.path;
    next();
  },
  methods: {
    goback() {
      this.$router.push("/profile");
    },
    itemClick() {
      console.log("asaaa");
      this.isActive = !this.isActive;
    },
    login() {
      if (this.isActive) {
        //短信登录
      }
    },
  },
};
</script>

<style scoped>
.nav-bar {
  font-size: 20px;
}
.center {
  font-size: 17px;
}
.el-icon-shopping-bag-1 {
  display: block;
  font-size: 50px;
  margin: 30px 30px;
  text-align: center;
  color: #ff8198;
}
.tabbar {
  width: 60%;
  padding: 10px 10px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
.text {
  margin-right: 20px;
}
.activeColor {
  color: #ff8198;
  border-bottom: 2px solid #ff8198;
}
.input-area {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 30px;
}
.tip {
  text-align: center;
  width: 70%;
  font-size: 12px;
  margin: 20px auto;
  margin-bottom: 30px;
}
.login-button {
  display: block;
  width: 70%;
  height: 42px;
  margin: 0 auto;
}
</style>